<template>
  <div class="global-hander">
    <a-row justify="space-between" :wrap="false">
      <a-col flex="auto" >
    <a-menu mode="horizontal" :default-selected-keys="['1']">
      <a-menu-item key="0" :style="{ padding: 0, marginRight: '38px' }" disabled>
        <div class="title-tar" >
          <div class="logo" style="margin-right: 30px; padding-top:10px;align-items: center">
            <img src="../static/logo/logo.png" style="width: auto; height: 40px"/>
          </div>
          <div class="title">
            OJ判题
          </div>
        </div>
      </a-menu-item>
      <a-menu-item v-for="item in visibleRoutes" :key="item.path" @click="router.push(item.path)">
        {{item.name}}
      </a-menu-item>
    </a-menu>
        </a-col>
      <a-col flex="100px">
        <div style="height: 88px; line-height: 88px; background: white; color: red">
          {{loginUser.userName}}
      </div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup >
import {routes} from "@/router/routes";
import { computed, ref } from "vue";
import { useRouter } from "vue-router";

import { useStore } from "vuex";
import checkAccess from "@/access/checkAccess";


const router = useRouter();
const store = useStore();

const loginUser = computed(() => store.state.user.loginUser);
console.log(loginUser.value);

setTimeout(()=>{
  store.dispatch("user/getLoginUser",{userName: "admin"})
},2000)


const visibleRoutes = computed(() => {
  return routes.filter((item, index) => {
    if (item.meta?.hideInMenu) {
      return false;
    }
    // 根据权限过滤菜单
    if (
      !checkAccess(store.state.user.loginUser, item?.meta?.access as string)
    ) {
      return false;
    }
    return true;
  });
});


// 默认主页
const selectedKeys = ref(["/"]);

</script>


<style scoped>
.global-hander {

    box-sizing: border-box;
    width: 100%;
    background-color: var(--color-neutral-2);
}
.title-tar{

    display: flex;
    flex-direction: row;
    align-items: center;
}
.global-hander :deep(.arco-menu-overflow-wrap){
    width: 100%;
    display: flex;
    align-items: center;
}


</style>
